import { formatPrice } from '@/utils';

interface PARAMS {
  userName: string;
  bookName: string;
  startDate: string;
  endDate: string;
  fonts: string;
  books: string;
  posterBg: string;
  qrCodeUrl: string;
}
export const posterFun = ({
  userName,
  bookName,
  startDate,
  endDate,
  fonts,
  books,
  posterBg,
  qrCodeUrl,
}: PARAMS) => {
  return {
    css: {
      width: '750rpx',
      height: '1510rpx',
      boxSizing: 'border-box',
      position: 'relative',
      background: posterBg,
      backgroundSize: 'cover',
      objectFit: 'fill',
      borderRadius: '8rpx',
    },
    views: [
      {
        type: 'image',
        src: 'https://app5.shuguostar.cn/imgs/images/answer/bg.png',
        css: {
          position: 'absolute',
          top: '100rpx',
          left: '36rpx',
          width: '666rpx',
          height: '124rpx',
          boxSizing: 'border-box',
        },
      },
      {
        type: 'view',
        css: {
          position: 'relative',
          width: '670rpx',
          height: '906rpx',
          margin: '298rpx 40rpx 0 40rpx',
          boxSizing: 'border-box',
        },
        views: [
          {
            type: 'image',
            src: 'https://app5.shuguostar.cn/imgs/images/answer/text_bg.png',
            css: {
              position: 'absolute',
              top: '0rpx',
              right: '0rpx',
              width: '670rpx',
              height: '906rpx',
            },
          },
          {
            type: 'image',
            src: 'https://app5.shuguostar.cn/imgs/images/answer/IP_4.png',
            css: {
              position: 'absolute',
              top: '-130rpx',
              right: '0rpx',
              width: '372rpx',
              height: '430rpx',
            },
          },
          {
            type: 'view',
            css: {
              position: 'absolute',
              top: '32rpx',
              left: '32rpx',
            },
            views: [
              {
                type: 'text',
                text: userName,
                css: {
                  display: 'block',
                  fontSize: '36rpx',
                  lineHeight: '50rpx',
                  fontWeight: '500',
                  color: '#fff',
                },

              },
              {
                type: 'text',
                text: '又读完一本书',
                css: {
                  display: 'block',
                  fontSize: '36rpx',
                  lineHeight: '50rpx',
                  fontWeight: '500',
                  color: '#fff',
                },
              },
            ],
          },
          {
            type: 'view',
            css: {
              position: 'absolute',
              top: '150rpx',
              left: '32rpx',
              width: '606rpx',
              height: '724rpx',
              padding: '32rpx',
              background: '#fff',
              borderRadius: '24rpx',
              boxSizing: 'border-box',
            },
            views: [
              {
                type: 'view',
                css: {
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  paddingBottom: '16rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: '阅读内容',
                    css: {
                      flex: '1',
                      fontSize: '24rpx',
                      lineHeight: '36rpx',
                      color: '#666',
                    },
                  },
                  {
                    type: 'text',
                    text: `《${bookName}》`,
                    css: {
                      width: '310rpx',
                      fontSize: '24rpx',
                      lineHeight: '36rpx',
                      color: '#333',
                    },
                  },
                ],
              },
              {
                type: 'view',
                css: {
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  paddingBottom: '16rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: '阅读时间',
                    css: {
                      flex: '1',
                      fontSize: '24rpx',
                      lineHeight: '36rpx',
                      color: '#666',
                    },
                  },
                  {
                    type: 'text',
                    text: `${startDate}至${endDate}`,
                    css: {
                      width: '310rpx',
                      fontSize: '24rpx',
                      lineHeight: '36rpx',
                      color: '#333',
                    },
                  },
                ],
              },
              {
                type: 'view',
                css: {
                  padding: '32rpx',
                  marginTop: '24rpx',
                },
                views: [
                  {
                    type: 'view',
                    css: {
                      display: 'flex',
                      alignItems: 'center',
                    },
                    views: [
                      {
                        type: 'image',
                        src: 'https://app5.shuguostar.cn/imgs/images/home/text.png',
                        css: {
                          display: 'inline-block',
                          width: '48rpx',
                          height: '48rpx',
                        },
                      },
                      {
                        type: 'text',
                        text: '共计阅读字数',
                        css: {
                          paddingLeft: '8rpx',
                          lineHeight: '48rpx',
                          fontSize: '28rpx',
                          fontWeight: '500',
                          color: '#333',
                        },
                      },
                    ],
                  },
                  {
                    type: 'view',
                    css: {
                      height: '80rpx',
                      paddingTop: '12rpx',
                      boxSizing: 'border-box',
                    },
                    views: [
                      {
                        type: 'text',
                        text: formatPrice(fonts),
                        css: {
                          display: 'inline-block',
                          fontSize: '48rpx',
                          lineHeight: '68rpx',
                          color: '#333',
                        },
                      },
                      {
                        type: 'text',
                        text: '万字',
                        css: {
                          display: 'inline-block',
                          paddingLeft: '8rpx',
                          fontSize: '28rpx',
                          lineHeight: '76rpx',
                          fontWeight: '500',
                          color: '#333',
                        },
                      },
                    ],
                  },
                ],
              },
              {
                type: 'view',
                css: {
                  padding: '32rpx',
                  marginTop: '16rpx',
                  marginBottom: '40rpx',
                },
                views: [
                  {
                    type: 'view',
                    css: {
                      display: 'flex',
                      alignItems: 'center',
                    },
                    views: [
                      {
                        type: 'image',
                        src: 'https://app5.shuguostar.cn/imgs/images/home/read.png',
                        css: {
                          display: 'inline-block',
                          width: '48rpx',
                          height: '48rpx',
                        },
                      },
                      {
                        type: 'text',
                        text: '共计阅读书',
                        css: {
                          paddingLeft: '8rpx',
                          lineHeight: '48rpx',
                          fontSize: '28rpx',
                          fontWeight: '500',
                          color: '#333',
                        },
                      },
                    ],
                  },
                  {
                    type: 'view',
                    css: {
                      height: '80rpx',
                      paddingTop: '12rpx',
                      boxSizing: 'border-box',
                    },
                    views: [
                      {
                        type: 'text',
                        text: formatPrice(books),
                        css: {
                          display: 'inline-block',
                          fontSize: '48rpx',
                          lineHeight: '68rpx',
                          color: '#333',
                        },
                      },
                      {
                        type: 'text',
                        text: '本',
                        css: {
                          display: 'inline-block',
                          paddingLeft: '8rpx',
                          fontSize: '28rpx',
                          lineHeight: '76rpx',
                          fontWeight: '500',
                          color: '#333',
                        },
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        type: 'view',
        css: {
          display: 'flex',
          width: '750rpx',
          padding: '16rpx 40rpx',
          marginTop: '100rpx',
          background: '#fff',
          boxSizing: 'border-box',
        },
        views: [
          {
            type: 'view',
            css: {
              flex: '1',
            },
            views: [
              {
                type: 'text',
                text: '这里的宣传语是什么？',
                css: {
                  display: 'block',
                  fontSize: '28rpx',
                  lineHeight: '40rpx',
                  color: '#4AAAF8',
                },
              },
              {
                type: 'text',
                text: '这里的宣传语是什么？',
                css: {
                  display: 'block',
                  marginTop: '16rpx',
                  marginBottom: '16rpx',
                  paddingLeft: '16rpx',
                  paddingRight: '16rpx',
                  width: '312rpx',
                  height: '48rpx',
                  background: 'linear-gradient( 90deg, #F69576 0%, #FB634E 100%)',
                  borderRadius: '24rpx',
                  fontSize: '28rpx',
                  fontWeight: '500',
                  textAlign: 'center',
                  lineHeight: '48rpx',
                  color: '#fff',
                  boxSizing: 'border-box',
                },
              },
              {
                type: 'text',
                text: '长按识别二维码',
                css: {
                  display: 'block',
                  fontSize: '24rpx',
                  lineHeight: '32rpx',
                  color: '#888',
                },
              },
            ],
          },
          {
            type: 'view',
            css: {
              width: '232rpx',
              display: 'flex',
              padding: '8rpx',
              background: 'linear-gradient( 180deg, #FFB196 0%, #FB634E 100%)',
              borderRadius: '16rpx',
            },
            views: [
              {
                type: 'text',
                text: '长\n按\n识\n别',
                css: {
                  paddingLeft: '16rpx',
                  width: '56rpx',
                  height: '160rpx',
                  fontSize: '28rpx',
                  lineHeight: '32rpx',
                  color: '#fff',
                  boxSizing: 'border-box',
                },
              },
              {
                type: 'view',
                css: {
                  width: '160rpx',
                  height: '160rpx',
                  padding: '4rpx',
                  borderRadius: '8rpx',
                  background: '#fff',
                  boxSizing: 'border-box',
                },
                views: [
                  {
                    type: 'image',
                    src: qrCodeUrl,
                    css: {
                      width: '152px',
                      height: '152rpx',
                      borderRadius: '8rpx',
                    },
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  };
};
